const styles = {}

styles.Content = {
  width: '1024px',
  margin: 'auto',
  padding: '20px',
}

styles.TopicCard = {
  padding: '35px',
  minHeight: '100px',
  borderRadius: '4px',
  backgroundColor: '#ffffff',
  boxShadow: '0 10px 30px rgba(0, 0, 0, .2)',
}

styles.TopicTitle = {
  fontSize: '32px',
}

styles.TopicContent = {
  paddingTop: '20px',
  fontSize: '14px',
}

styles.TopicFooter = {
  marginTop: '35px',
  paddingTop: '20px',
  borderTop: '1px solid #ddd',
}

styles.LabelList = {
  display: 'flex',
  flexDirection: 'row',
  '&>li': {
    marginRight: '10px',
    '&:last-child': {
      marginRight: '0',
    }
  }
}

styles.Label = {
  padding: '5px 10px',
  borderRadius: '4px',
  backgroundColor: '#448ef6',
  color: '#ffffff',
  '&.Label-1': {
    backgroundColor: '#ff4d4d',
  },
  '&.Label-2': {
    backgroundColor: '#f6ec66',
  },
  '&.Label-3': {
    backgroundColor: '#ffaaa5',
  },
}


export default styles
